import React, { Component } from 'react';
import '../styles/Cate.scss'
import pic1 from '../assets/22.gif'
import pic2 from '../assets/23.gif'
import pic3 from '../assets/24.gif'
import pic4 from '../assets/25.gif'
import pic5 from '../assets/26.gif'
import pic6 from '../assets/27.gif'
import pic7 from '../assets/28.gif'
import pic8 from '../assets/29.gif'
import pic9 from '../assets/30.gif'
import pic10 from '../assets/31.gif'
import pic11 from '../assets/32.gif'


class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 2,
            list: [
                {
                    name: '活动专区', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '品牌', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '美容护肤', list2: [
                        {
                            name: '面部护理', list3: [
                                { pic: pic1, name: '卸妆' },
                                { pic: pic2, name: '洁面/去角质' },
                                { pic: pic3, name: '爽肤水/喷雾' },
                                { pic: pic4, name: '乳液' },
                                { pic: pic5, name: '精华/精油' },
                                { pic: pic6, name: '面霜' },
                                { pic: pic7, name: '面膜' },
                                { pic: pic8, name: '防晒隔离' },
                                { pic: pic9, name: '润唇膏/唇膜' },
                                { pic: pic10, name: '面部套装' },
                                { pic: pic11, name: '其他面部' },
                            ]
                        },
                        {
                            name: '身体护理', list3: [
                                { pic: pic1, name: '卸妆' },
                                { pic: pic2, name: '洁面/去角质' },
                                { pic: pic3, name: '爽肤水/喷雾' },
                                { pic: pic4, name: '乳液' },
                                { pic: pic5, name: '精华/精油' },
                                { pic: pic6, name: '面霜' },
                                { pic: pic7, name: '面膜' },
                                { pic: pic8, name: '防晒隔离' },
                                { pic: pic9, name: '润唇膏/唇膜' },
                                { pic: pic10, name: '面部套装' },
                                { pic: pic11, name: '其他面部' },
                            ]
                        },
                    ]
                },
                {
                    name: '彩妆', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '香水', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '酒类', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '服饰箱包', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },
                {
                    name: '食品保健', list2: [
                        {
                            name: '', list3: [
                                { pic: '', name: '' }
                            ]
                        }
                    ]
                },

            ]
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='cate'>
                <div className="aside">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className={'aside_item ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                    <span>{item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="content">
                    {
                        this.state.list[this.state.currentIndex].list2.map((item2,index)=>{
                            return (
                                <div className="list2" key={index}>
                                    <h4>{item2.name}</h4>
                                    <div className="list3">
                                        {
                                            item2.list3.map((item3,index)=>{
                                                return (
                                                    <div className="list3_item" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">
                                                            {item3.name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Cate;